<template>
	<div class="process-route">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addRoute">新增工艺路线</el-button>
				<el-input v-model="searchName" placeholder="搜索工艺名称" style="width: 200px; margin-left: 10px" clearable />
			</div>

			<el-table :data="filteredRoutes" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="routeId" label="编码" sortable></el-table-column>
				<el-table-column prop="routeName" label="工艺名称" sortable></el-table-column>
				<el-table-column prop="docDate" label="单据日期" sortable></el-table-column>
				<el-table-column prop="auditDate" label="审核日期" sortable></el-table-column>
				<el-table-column prop="operator" label="操作员" sortable></el-table-column>
				<el-table-column prop="auditor" label="审核员" sortable></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column fixed="right" label="操作" width="140">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editRoute(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteRoute(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="工艺路线" width="600px">
			<el-form :model="currentRoute" label-width="120px">
				<el-form-item label="编码">
					<el-input v-model="currentRoute.routeId" />
				</el-form-item>
				<el-form-item label="工艺名称">
					<el-input v-model="currentRoute.routeName" />
				</el-form-item>
				<el-form-item label="单据日期">
					<el-date-picker v-model="currentRoute.docDate" type="date" value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="审核日期">
					<el-date-picker v-model="currentRoute.auditDate" type="date" value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="操作员">
					<el-input v-model="currentRoute.operator" />
				</el-form-item>
				<el-form-item label="审核员">
					<el-input v-model="currentRoute.auditor" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="currentRoute.remark" type="textarea" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveRoute">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const routes = ref([
	{ routeId: 'PR001', routeName: '抗生素工艺流程', docDate: '2024-06-01', auditDate: '2024-06-02', operator: '张三', auditor: '李四', remark: '主工艺流程' },
	{ routeId: 'PR002', routeName: '固体制剂流程', docDate: '2024-06-03', auditDate: '2024-06-04', operator: '王五', auditor: '赵六', remark: '' },
])

for (let i = 3; i <= 15; i++) {
	routes.value.push({
		routeId: `PR00${i}`,
		routeName: `工艺流程${i}`,
		docDate: `2024-06-${i < 10 ? '0' + i : i}`,
		auditDate: `2024-06-${i + 1}`,
		operator: `操作员${i}`,
		auditor: `审核员${i}`,
		remark: i % 2 === 0 ? '常规工艺' : '特殊工艺'
	})
}

const searchName = ref('')
const dialogVisible = ref(false)
const currentRoute = ref({})

// 筛选
const filteredRoutes = computed(() =>
	routes.value.filter(r => !searchName.value || r.routeName.includes(searchName.value))
)

// 新增
const addRoute = () => {
	currentRoute.value = { routeId: '', routeName: '', docDate: '', auditDate: '', operator: '', auditor: '', remark: '' }
	dialogVisible.value = true
}

// 编辑
const editRoute = (row) => {
	currentRoute.value = { ...row }
	dialogVisible.value = true
}

// 保存
const saveRoute = () => {
	if (!currentRoute.value.routeId || !currentRoute.value.routeName) {
		ElMessage.error('编码和工艺名称不能为空')
		return
	}
	const index = routes.value.findIndex(r => r.routeId === currentRoute.value.routeId)
	if (index >= 0) {
		routes.value[index] = { ...currentRoute.value }
		ElMessage.success('工艺路线已更新')
	} else {
		routes.value.push({ ...currentRoute.value })
		ElMessage.success('工艺路线已新增')
	}
	dialogVisible.value = false
}

// 删除
const deleteRoute = (row) => {
	ElMessageBox.confirm('确认删除该工艺路线吗？', '提示', { type: 'warning' })
		.then(() => {
			routes.value = routes.value.filter(r => r.routeId !== row.routeId)
			ElMessage.success('工艺路线已删除')
		})
		.catch(() => { })
}
</script>

<style scoped>
.process-route .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
